<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>ResizeObserver Demo with Resizable Box</title>
  <style>
    #resizable-box {
      width: 200px;
      height: 200px;
      background-color: #3498db;
      color: white;
      text-align: center;
      line-height: 200px;
      font-size: 24px;
      transition: background-color 0.5s ease;
      resize: both;
      overflow: auto;
      cursor: pointer;
    }
  </style>
</head>
<body>
 
  <div id="resizable-box">Resize me!</div>
 
  <script>
    const resizableBox = document.getElementById('resizable-box');
    let isResizing = false;
    let startX, startY, startWidth, startHeight;
 
    const resizeObserver = new ResizeObserver(entries => {
      for (const entry of entries) {
        const { width, height } = entry.contentRect;
        console.log('宽度:', width, '高度:', height);
      }
    });
 
    resizeObserver.observe(resizableBox);
 
    resizableBox.addEventListener('mousedown', startResize);
    document.addEventListener('mousemove', handleResize);
    document.addEventListener('mouseup', stopResize);
 
    function startResize(e) {
      isResizing = true;
      startX = e.clientX;
      startY = e.clientY;
      startWidth = parseInt(document.defaultView.getComputedStyle(resizableBox).width, 10);
      startHeight = parseInt(document.defaultView.getComputedStyle(resizableBox).height, 10);
    }
 
    function handleResize(e) {
      if (!isResizing) return;
      const newWidth = startWidth + (e.clientX - startX);
      const newHeight = startHeight + (e.clientY - startY);
 
      resizableBox.style.width = newWidth + 'px';
      resizableBox.style.height = newHeight + 'px';
    }
 
    function stopResize() {
      isResizing = false;
    }
  </script>
 
</body>
</html>